<template>
  <div ref="echart" class="dashboard-line" :style="heightStyle" />
</template>
<script lang="ts" setup name="curveLine">
import * as echarts from "echarts";
import { nextTick, watch, onMounted, onUnmounted, ref, computed } from "vue";
import "echarts/theme/macarons";
const chart = ref<any>(null);
const echart = ref<any>(null);

const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: "",
  },
  height: {
    type: Number,
    default: 340,
  },
});
const initChart = () => {
  chart.value = echarts.init(echart.value, "macarons");
  setOptions();
};
onMounted(async () => {
  await nextTick();
  initChart();
});
onUnmounted(() => {
  if (!chart.value) {
    return;
  }
  chart.value?.dispose();
  chart.value = null;
});
const heightStyle = computed(() => `height:${props.height}px`);
watch(props.chartData, () => {
  setOptions();
});
let option = ref({
  color: ["#28c76f", "#7AC9FD", "#fcad7b", "#fcf67b"],
  tooltip: {
    trigger: "axis",
  },
  grid: { top: "30px", left: "40px", right: "4%", bottom: "14%" },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#333", //左边线的颜色
      },
    },
  },
  yAxis: {
    scale: true,
    axisLine: {
      lineStyle: {
        width: 1,
        color: "#fff",
      },

      symbol: ["none", "arrow"],
    },
    minInterval: 1,
    splitNumber: 3,
    type: "value",
    axisTick: {
      inside: true,
    },
    axisLabel: {
      textStyle: {
        color: "#333",
        fontSize: 10,
      },
    },

    nameTextStyle: {
      color: "#333",
    },
    splitLine: {},
  },
  series: [],
});
const setOptions = () => {
  let List = props.chartData.y;
  let series = [];
  let legends = props.chartData.legend;
  let xData = props.chartData.x;
  for (let i in List) {
    let serie = {
      type: "bar",
      name: legends[i] || "",
      data: List[i],
      smooth: true,
      symbol: "none",
      sampling: "average",
      areaStyle: {},
    };
    series.push(serie);
  }
  option.value.xAxis.data = xData;
  option.value.xAxis.data = xData;
  option.value.series = series;
  chart.value?.setOption(option.value);
};
</script>
<style lang="scss" scoped>
.dashboard-line {
  background-color: #fff;
  height: 360px;
  width: 100%;
}
</style>
